<template>
    <el-header>
        <div>
            智慧校园-学生学业质量分析系统
        </div>
        <div>
            <span style="line-height: 40px; margin-right: 15px;">欢迎 {{ store.user.username }}</span>
            <el-dropdown>
                <div>
                    <!-- <el-avatar :icon="UserFilled" /> -->
                    <el-avatar :size="40" :src="actualAvatar" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{ roleName }}</el-dropdown-item>
                        <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { computed } from 'vue'
import useUserStore from '../../store/useUserStore'
import useRouterStore from '../../store/useRouterStore'
import { useRouter } from 'vue-router'
const router = useRouter()

const store = useUserStore()
const { user: { username, role: { roleName } }, changeUser } = store

// 加载elementplus提供的图标作为头像
// import { UserFilled } from '@element-plus/icons-vue'
// 加载本地图标作为默认头像
const defaultAvatar = new URL('../../assets/avatar.png', import.meta.url).href

const actualAvatar = computed(() => store.user.avatarUrl ? `http://localhost:3000/${store.user.avatarUrl}` : defaultAvatar)

const { changeRouter } = useRouterStore()
const handleLogout = () => {
    changeUser({})
    // isGetterRouter false
    changeRouter(false)
    router.push('/login')
}
</script>

<style lang="scss" scoped>
.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0d47a1;
    color: white;
}
</style>